<template>

        <div class="header">
          <div class="left">
            <el-icon :size="80" color="orange"><Sunny /></el-icon>
            <span>新中地天气</span>
          </div>
          <div class="right"  >
            <el-icon @click="showPrompt" :size="40" ><InfoFilled color="white" /></el-icon>
          </div>
        </div>
    
         <!-- 提示框 -->
     <div class="prompt" :class="isshow==false?'isshow':''">
        <h1>关于:</h1>
        <p>这个应用可以用来追踪你选择城市的当前天气</p>
        <h1>如何使用:</h1>
        <p>1.点击搜索框输入系希望追踪的城市</p>
        <p>2.在搜索结果中选中一个城市,你将获取当地最新的天气</p>
        <p>3.点击右侧的+号可以将追踪城市的天气情况保存在首页</p>
        <h1>移除城市</h1>
        <p>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p> 
        <el-button @click="handleclose">关闭</el-button>
     </div>

</template>

<script setup>
import { Sunny, InfoFilled,CirclePlusFilled } from '@element-plus/icons-vue'

import { ref,watch,getCurrentInstance} from 'vue'
const isshow = ref(false)

const handleclose = () => {
    isshow.value = false
}
// 提示按钮i
const showPrompt = () => {
    isshow.value = true
}

const props = defineProps({
     addcity: {
         type: Array,
     }
})




</script>

<style lang="scss" scoped>
@import 'reset-css';


    .header {
        
      display: flex;
      justify-content: space-around;
      align-items: center;
     height: 100px;
     background-color: rgb(1, 102, 138) ;

      .left {
        display: flex;
        align-items: center;
        span {
         margin-left: 20px;
          font-weight: 600;
          color: white;
          font-size: 35px;
        }
       
      }
      .right {
        .el-icon:nth-child(2){
            margin-left: 20px;
        }
      }
    }
    
      
  .prompt {
    z-index: 99;
    border-radius: 20px;
    padding: 15px;
    height: 450px;
    width: 400px;
    background-color: aliceblue;
    position: absolute;
    top: 190px;
    left: 600px;

    h1{
        margin-top: 25px;
        margin-bottom: 10px;
        font-size: 25px;
    }
    p{
        font-size: 15px;
    }
    .el-button{
       margin-left: 160px;
       height: 40px;
       width: 70px;
        margin-top: 30px;
        background-color: rgb(212, 191, 176);
    }
  }
  .isshow{
    display: none;
  }
 

</style>